
<!doctype html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>外部调用UEditor的多图上传和附件上传</title>
    
    <style>
        ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
        li{list-style-type: none;margin: 5px;padding: 0;}
    </style>
</head>
<body>
<h1>外部调用UEditor的多图上传示例</h1>
 
<button type="button" id="j_upload_img_btn">多图上传</button>
<ul id="upload_img_wrap"></ul>

<div class="am-form-group">
  <label for="user-phone" class="am-u-sm-2 am-form-label">商品详情 </label>
  <div class="am-u-sm-10">
    <textarea id="container" name="goods[content]" style="width: 100%;height:400px;"></textarea>
  </div>
</div> 

<!-- 加载编辑器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea>
 
<script type="text/javascript" src="/static/UEditor/ueditor.config.js"></script>
<!-- 编辑器源码文件 -->
<script type="text/javascript" src="/static/UEditor/ueditor.all.js"></script>
<!-- 使用ue -->
<script type="text/javascript">
var ue = UE.getEditor('container');
// 实例化编辑器，这里注意配置项隐藏编辑器并禁用默认的基础功能。
var uploadEditor = UE.getEditor("uploadEditor", {
    isShow: false,
    focus: false,
    enableAutoSave: false,
    autoSyncData: false,
    autoFloatEnabled:false,
    wordCount: false,
    sourceEditor: null,
    scaleEnabled:true,
    toolbars: [["insertimage", "attachment"]]
});

// 监听多图上传和上传附件组件的插入动作
uploadEditor.ready(function () {
    uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
    uploadEditor.addListener("afterUpfile",_afterUpfile);
});

// 自定义按钮绑定触发多图上传和上传附件对话框事件
document.getElementById('j_upload_img_btn').onclick = function () {
    var dialog = uploadEditor.getDialog("insertimage");
    dialog.title = '多图上传';
    dialog.render();
    dialog.open();
};

// 多图上传动作
function _beforeInsertImage(t, result) {
    var imageHtml = '';
    for(var i in result){
        imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"><input type="hidden" value="'+result[i].src+'" /></li>';
    }
    document.getElementById('upload_img_wrap').innerHTML = imageHtml;
}
 
</script>
</body>
</html>